<template>
  <div class="articles">
    <banner></banner>
    <div class="site-content animate">
      <!-- 文章目录 -->
      <!-- <div id="article-menus">
        <menu-tree :menus="menus"
                   child-label="child"></menu-tree>
      </div> -->
      <main class="site-main">
        <article class="hentry">
          <!-- 文章头部 -->
          <header class="entry-header">
            <!-- 标题输出 -->
            <h1 class="entry-title">{{this.blog_xxoo.name}}</h1>
            <hr>
            <div class="breadcrumbs">
              <div id="crumbs">最后更新时间：{{this.blog_xxoo.pub_date}}</div>
            </div>
          </header>
          <!-- 文章内容-->
          <div class="entry-content">
               <div v-html="blog"></div>
          </div>
         
          <!-- 文章底部 -->
          <section-title>
            <footer class="post-footer">
              <!-- 阅读次数 -->
              <div class="post-like">
                <i class="iconfont iconeyes"></i>
                <span class="count">1122</span>
              </div>
              <!-- 分享按钮 -->

              <!-- 赞助按钮 -->
              <div class="donate"
                   @click="showDonate=!showDonate">
                <span>赏</span>
                <ul class="donate_inner"
                    :class="{'show':showDonate}">
                  <li class="wedonate"><img src="http://pan.chestnut0.top/view.php/e5cfe58b82a33829358b284a7b71030d.png">
                    <p>微信</p>
                  </li>
                  <li class="alidonate"><img src="http://pan.chestnut0.top/view.php/a276ff129e10bdc09a44f951f6ce2328.png">
                    <p>支付宝</p>
                  </li>
                </ul>
              </div>
              <!-- 文章标签 -->
              <!-- <div class="post-tags">
                                <i class="iconfont iconcategory"></i>
                                <router-link to="/category/web">Web</router-link>
                            </div> -->
            </footer>
          </section-title>

          <!--声明-->
          <div class="open-message">
            <p>声明：Chestnut博客|版权所有，违者必究|如未注明，均为原创
            <p>转载：转载请注明原文链接 - <a href="/">{{blog_xxoo.name}}</a></p>
          </div>
          <!--评论-->

        </article>
      </main>
    </div>
  </div>
</template>

<script>
// 导入dm转换html的依赖
import MarkdownIt from 'markdown-it'
import Banner from '@/components/banner'
import sectionTitle from '@/components/section-title'
import comment from '@/components/comment'
import menuTree from '@/components/menu-tree'
// import {fetchComment} from '../api'
export default {
  name: 'articles',
  props: {
    post: {
      type: Object,
    },
  },
  data() {
    return {
      showDonate: false,
      comments: [],
      menus: [],
      blog: '',
      blog_xxoo: {
        name: '',
        pub_date: '',
      },
    }
  },
  components: {
    Banner,
    sectionTitle,
    comment,
    menuTree,
  },
  methods: {
    // 获取文章列表
    async thislist() {
      // console.log(post.id);
      // let id = this.$route.params.id
      // 获取文章id
      // console.log(this.$route.params.id)
      const { data: res } = await this.$http.get(
        'http://blog.chestnut0.top/api/listById/' + this.$route.params.id
      )
    //   console.log(res)
      const md = new MarkdownIt()
      this.blog = md.render(res.data.content)
      //   console.log(this.blog)
      this.blog_xxoo.name = res.data.name
      this.blog_xxoo.pub_date = res.data.pub_date.substring(0,16)
    //   console.log(this.blog_xxoo)
    },
     // 生成目录
          createMenus(){
              let arr = []
              for(let i=6;i>0;i--){
                  let temp = []
                  let e = document.querySelector(".entry-content").querySelectorAll(`h${i}`)
                  for (let j=0;j<e.length;j++){
                      let child = this.fetchH(arr,e[j].offsetTop,(j+1 === e.length)?undefined:e[j+1].offsetTop)
                      temp.push({
                          h: i,
                          title: e[j].innerText,
                          id: e[j].id,
                          offsetTop: e[j].offsetTop,
                          child
                      })
                  }
                  if (temp.length){
                      arr = temp
                  }
              }
              this.menus = arr
          }
  },
  mounted() {
         this.createMenus()
  },
  created() {
    this.thislist()
  },
  // 计算属性
  computed: {},
}
</script>
<style scoped lang="less">
// @import '../assets/css/style.less';
.site-content {
  position: relative;
  .site-main {
    padding: 80px 0 0 0;
  }
}
#article-menus {
  position: sticky;
  top: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  border-radius: 3px;
  padding: 15px;
  width: 300px;
  transform: translateX(-120%) translateY(150px);
  font-size: 14px;
}
article.hentry {
  .entry-header {
    .entry-title {
      font-size: 23px;
      font-weight: 600;
      color: #737373;
      margin: 0.67em 0;

      &:before {
        content: '#';
        margin-right: 6px;
        color: #d82e16;
        font-size: 20px;
        font-weight: 600;
      }
    }

    hr {
      height: 1px;
      border: 0;
      background: #efefef;
      margin: 15px 0;
    }

    .breadcrumbs {
      font-size: 14px;
      color: #d2d2d2;
      text-decoration: none;
      margin-bottom: 30px;
    }
  }

  footer.post-footer {
    width: 100%;
    padding: 20px 10px;
    margin-top: 30px;
    height: 65px;
    position: relative;
    i {
      font-size: 18px;
      margin-right: 5px;
    }
    .post-like {
      float: right;
      margin: 7px 0 0 20px;
    }

    .post-share {
      float: right;
      list-style: none;
      margin-right: 20px;
    }

    .donate {
      float: left;
      line-height: 36px;
      border-radius: 100%;
      -webkit-border-radius: 100%;
      -moz-border-radius: 100%;
      border: 1px solid #2b2b2b;
      &:hover {
        border: 1px solid goldenrod;
        span {
          color: goldenrod;
        }
      }
      span {
        color: #2b2b2b;
        padding: 10px;
        position: relative;
        cursor: pointer;
      }

      .donate_inner {
        display: none;
        margin: 0;
        list-style: none;
        position: absolute;
        left: 80px;
        top: -40px;
        background: #fff;
        padding: 10px;
        border: 1px solid #ddd;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
        border-radius: 3px;
        &.show {
          display: block;
        }
        li {
          float: left;
        }

        img {
          width: 100px;
        }
        p {
          text-align: center;
          font-size: 15px;
          color: #d2d2d2;
          line-height: 1rem;
        }
      }

      .donate_inner:after,
      .donate_inner:before {
        content: '';
        position: absolute;
        left: 0;
        bottom: 45%;
        margin-left: -8px;
        border-top: 8px solid transparent;
        border-bottom: 8px solid transparent;
        border-right: 8px solid #fff;
      }

      .donate_inner:before {
        left: -1px;
        border-right: 8px solid #ddd;
      }
    }

    .post-tags {
      margin: 7px 0 0 20px;
      float: left;
      text-transform: uppercase;
      a:hover {
        color: #ff6d6d;
      }
    }
  }
  .open-message {
    margin: 50px 0;
    position: relative;
    background: #2b2b2b;
    padding: 10px 30px;
    border-radius: 3px;
    font-size: 14px;
    color: #fff;
    &:after {
      content: '';
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      border-bottom: 10px solid #2b2b2b;
      position: absolute;
      top: -8px;
      left: 48%;
    }
    p {
      margin: 10px 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    a {
      color: #a0dad0;
      padding: 0 5px;
    }
  }
}
</style>
